@import '~styles/config.scss';


.TuwenListCheck {

    .ul {

        display    : flex;
        flex-wrap  : wrap;
        margin-left: -14px;
        margin-top : -14px;

        .kong {
            padding   : 140px 0px 0px 14px;
            text-align: center;
            width     : 100%;
            box-sizing: border-box;
            font-size : 12px;
            color     : $--color-text-secondary;
        }

        .li {
            padding: 14px 0px 0px 14px;
            width  : 240px;

            box-sizing      : border-box;
            position        : relative;
            cursor          : pointer;
            // border-radius: 4px; 
            overflow        : hidden;

            .border {
                width         : 100%;
                padding-bottom: 100%;
                position      : relative;
            }

            .img {
                position  : absolute;
                top       : 0px;
                left      : 0px;
                width     : 100%;
                height    : 100%;
                object-fit: cover;
            }

            .title {
                position: absolute;
                bottom  : 0px;

                color      : #fff;
                left       : 0px;
                width      : 100%;
                height     : 30px;
                line-height: 30px;

                padding   : 0px 10px;
                box-sizing: border-box;
                font-size : 12px;
                background: rgba(0, 0, 0, 0.4);
                display   : flex;

                .t1 {
                    margin-right: 6px;
                    font-size   : 18px;
                    flex        : none;
                }

                .t2 {
                    overflow     : hidden;
                    text-overflow: ellipsis;
                    white-space  : nowrap;
                    flex         : auto;
                }

                .t3 {
                    margin-left: 10px;
                    flex       : none;
                    opacity    : .8;
                }
            }

            .select {
                position          : absolute;
                top               : 0px;
                left              : 0%;
                width             : 100%;
                height            : 100%;
                // background     : #f00;
                display           : flex;
                z-index           : 1;
                justify-content   : center;
                align-items       : center;


                .state {
                    position       : absolute;
                    top            : 50%;
                    left           : 50%;
                    margin-top     : -22px;
                    margin-left    : -22px;
                    transition     : all .5s;
                    opacity        : 0;
                    background     : $--color-success;
                    border         : 2px solid #fff;
                    color          : #fff;
                    font-size      : 28px;
                    font-weight    : bold;
                    display        : flex;
                    justify-content: center;
                    align-items    : center;
                    border-radius  : 100%;
                    width          : 40px;
                    height         : 40px;
                    box-shadow     : 0px 0px 10px rgba(0, 0, 0, 0.2);

                    &.true {
                        background: $--color-success;
                    }

                    &.false {
                        background: rgba(255, 255, 255, 0.3);
                    }
                }
            }

            .option {
                transition     : all .5s;
                opacity        : 0;
                position       : absolute;
                top            : 0px;
                right          : 0px;
                display        : flex;
                flex-wrap      : wrap;
                align-items    : center;
                width          : 100%;
                display        : flex;
                box-sizing     : border-box;
                padding        : 0px 10px;
                justify-content: space-between;

                .o {
                    margin    : 10px 3px 0px 3px;
                    transition: all .5s;

                    // background   : rgba(255, 255, 255, 0.6);
                    // border:1px solid #fff;
                    color        : #fff;
                    width        : 34px;
                    height       : 34px;
                    text-align   : center;
                    line-height  : 34px;
                    border-radius: 5px;
                    font-size    : 18px;
                    position     : relative;
                    z-index      : 2;
                    border       : 1px solid transparent;

                    i {
                        display        : flex;
                        width          : 100%;
                        height         : 100%;
                        align-items    : center;
                        justify-content: center;
                    }

                    &.hover {
                        &:hover {
                            border    : 1px solid rgba(255, 255, 255, 0.3);
                            background: rgba(255, 255, 255, 0.1);
                        }
                    }

                }
            }

            .bg {
                transition: all .5s;
                position  : absolute;
                top       : 0px;
                left      : 0px;
                opacity   : 0;
                width     : 100%;
                height    : 100%;
                background: rgba(0, 0, 0, 1);
            }



            &:hover {
                .bg {
                    opacity: 0.8;
                }

                .option {
                    opacity: 1;
                }

                &.false {
                    .select {
                        .state.false {
                            opacity: 1;
                        }
                    }
                }

                &.true {

                    .state.true {
                        // transform: translateY(20px);

                    }
                }
            }

            &.true {
                .bg {
                    opacity: 0.8;
                }

                .select {
                    .state.true {
                        opacity: 1;
                    }
                }

            }



        }
    }
}